<!-- 流量分析 -->
<template>
    <div class="user">
        <div class="ls-card ls-card-top">
            <div class="journal-search m-t-16">
                <el-form ref="formRef" inline :model="summary" label-width="80px" size="small">
                    <el-form-item label="统计时间">
                        <el-date-picker
                            v-model="month"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                    </el-form-item>

                    <el-button size="small" type="primary" @click="getDataCenterStatistics">查询</el-button>
                    <el-button size="small" type="" @click="onReset">重置</el-button>
                </el-form>
            </div>
        </div>
        <div class="ls-card m-t-16" v-if="Object.keys(statisticsData.sales_data).length > 0">
            <div class="card-title">销售汇总</div>
            <div class="card-content m-t-24">
                <el-row :gutter="21">
                    <el-col :span="7" class="flex-col col-center">
                        <div class="lighter m-b-8">
                            {{ statisticsData.sales_data.total.sales_revenue.text }}
                        </div>
                        <div class="font-size-30">
                            {{ statisticsData.sales_data.total.sales_revenue.amount }}
                        </div>
                    </el-col>
                    <el-col :span="7" class="flex-col col-center">
                        <div class="lighter m-b-8">{{ statisticsData.sales_data.day.sales_revenue.text }}</div>
                        <div class="font-size-30">{{ statisticsData.sales_data.day.sales_revenue.amount }}</div>
                    </el-col>
                    <el-col :span="7" class="flex-col col-center">
                        <div class="lighter m-b-8">
                            {{ statisticsData.sales_data.yesterday.sales_revenue.text }}
                        </div>
                        <div class="font-size-30">
                            {{ statisticsData.sales_data.yesterday.sales_revenue.amount }}
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="ls-card m-t-16" v-if="Object.keys(statisticsData.sales_data_balance).length > 0">
            <div class="card-title">销售汇总(余额支付)</div>
            <div class="card-content m-t-24">
                <el-row :gutter="21">
                    <el-col :span="7" class="flex-col col-center">
                        <div class="lighter m-b-8">
                            {{ statisticsData.sales_data_balance.total.sales_revenue.text }}
                        </div>
                        <div class="font-size-30">
                            {{ statisticsData.sales_data_balance.total.sales_revenue.amount }}
                        </div>
                    </el-col>
                    <el-col :span="7" class="flex-col col-center">
                        <div class="lighter m-b-8">{{ statisticsData.sales_data_balance.day.sales_revenue.text }}</div>
                        <div class="font-size-30">{{ statisticsData.sales_data_balance.day.sales_revenue.amount }}</div>
                    </el-col>
                    <el-col :span="7" class="flex-col col-center">
                        <div class="lighter m-b-8">
                            {{ statisticsData.sales_data_balance.yesterday.sales_revenue.text }}
                        </div>
                        <div class="font-size-30">
                            {{ statisticsData.sales_data_balance.yesterday.sales_revenue.amount }}
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="ls-card m-t-16" v-if="Object.keys(statisticsData.sales_data_wechat).length > 0">
            <div class="card-title">销售汇总(微信支付)</div>
            <div class="card-content m-t-24">
                <el-row :gutter="21">
                    <el-col :span="7" class="flex-col col-center">
                        <div class="lighter m-b-8">{{ statisticsData.sales_data_wechat.total.sales_revenue.text }}</div>
                        <div class="font-size-30">
                            {{ statisticsData.sales_data_wechat.total.sales_revenue.amount }}
                        </div>
                    </el-col>
                    <el-col :span="7" class="flex-col col-center">
                        <div class="lighter m-b-8">{{ statisticsData.sales_data_wechat.day.sales_revenue.text }}</div>
                        <div class="font-size-30">{{ statisticsData.sales_data_wechat.day.sales_revenue.amount }}</div>
                    </el-col>
                    <el-col :span="7" class="flex-col col-center">
                        <div class="lighter m-b-8">
                            {{ statisticsData.sales_data_wechat.yesterday.sales_revenue.text }}
                        </div>
                        <div class="font-size-30">
                            {{ statisticsData.sales_data_wechat.yesterday.sales_revenue.amount }}
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="ls-card m-t-16" v-if="Object.keys(statisticsData.sales_data_alipay).length > 0">
            <div class="card-title">销售汇总(支付宝支付)</div>
            <div class="card-content m-t-24">
                <el-row :gutter="21">
                    <el-col :span="7" class="flex-col col-center">
                        <div class="lighter m-b-8">{{ statisticsData.sales_data_alipay.total.sales_revenue.text }}</div>
                        <div class="font-size-30">
                            {{ statisticsData.sales_data_alipay.total.sales_revenue.amount }}
                        </div>
                    </el-col>
                    <el-col :span="7" class="flex-col col-center">
                        <div class="lighter m-b-8">{{ statisticsData.sales_data_alipay.day.sales_revenue.text }}</div>
                        <div class="font-size-30">{{ statisticsData.sales_data_alipay.day.sales_revenue.amount }}</div>
                    </el-col>
                    <el-col :span="7" class="flex-col col-center">
                        <div class="lighter m-b-8">
                            {{ statisticsData.sales_data_alipay.yesterday.sales_revenue.text }}
                        </div>
                        <div class="font-size-30">
                            {{ statisticsData.sales_data_alipay.yesterday.sales_revenue.amount }}
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="ls-card m-t-16" v-if="Object.keys(statisticsData.user_data).length > 0">
            <div class="card-title">用户汇总</div>
            <div class="card-content m-t-24">
                <el-row :gutter="24">
                    <el-col :span="4" class="flex-col col-center">
                        <div class="lighter m-b-8">{{ statisticsData.user_data.total.activate.text }}</div>
                        <div class="font-size-30">{{ statisticsData.user_data.total.activate.count }}</div>
                    </el-col>
                    <el-col :span="4" class="flex-col col-center">
                        <div class="lighter m-b-8">{{ statisticsData.user_data.total.not_activate.text }}</div>
                        <div class="font-size-30">{{ statisticsData.user_data.total.not_activate.count }}</div>
                    </el-col>
                    <el-col :span="4" class="flex-col col-center">
                        <div class="lighter m-b-8">{{ statisticsData.user_data.day.activate.text }}</div>
                        <div class="font-size-30">{{ statisticsData.user_data.day.activate.count }}</div>
                    </el-col>
                    <el-col :span="4" class="flex-col col-center">
                        <div class="lighter m-b-8">{{ statisticsData.user_data.day.not_activate.text }}</div>
                        <div class="font-size-30">{{ statisticsData.user_data.day.not_activate.count }}</div>
                    </el-col>
                    <el-col :span="4" class="flex-col col-center">
                        <div class="lighter m-b-8">{{ statisticsData.user_data.yesterday.activate.text }}</div>
                        <div class="font-size-30">{{ statisticsData.user_data.yesterday.activate.count }}</div>
                    </el-col>
                    <el-col :span="4" class="flex-col col-center">
                        <div class="lighter m-b-8">{{ statisticsData.user_data.yesterday.not_activate.text }}</div>
                        <div class="font-size-30">{{ statisticsData.user_data.yesterday.not_activate.count }}</div>
                    </el-col>
                </el-row>
            </div>
        </div>

        <div class="ls-card m-t-16" v-if="Object.keys(statisticsData.withdraw_data).length > 0">
            <div class="card-title">提现汇总</div>
            <div class="card-content m-t-24">
                <el-row :gutter="24">
                    <el-col :span="4" class="flex-col col-center">
                        <div class="lighter m-b-8">{{ statisticsData.withdraw_data.total.withdraw.text }}</div>
                        <div class="font-size-30">{{ statisticsData.withdraw_data.total.withdraw.amount }}</div>
                    </el-col>
                    <el-col :span="4" class="flex-col col-center">
                        <div class="lighter m-b-8">{{ statisticsData.withdraw_data.total.not_withdraw.text }}</div>
                        <div class="font-size-30">{{ statisticsData.withdraw_data.total.not_withdraw.amount }}</div>
                    </el-col>
                    <el-col :span="4" class="flex-col col-center">
                        <div class="lighter m-b-8">{{ statisticsData.withdraw_data.day.withdraw.text }}</div>
                        <div class="font-size-30">{{ statisticsData.withdraw_data.day.withdraw.amount }}</div>
                    </el-col>
                    <el-col :span="4" class="flex-col col-center">
                        <div class="lighter m-b-8">{{ statisticsData.withdraw_data.day.not_withdraw.text }}</div>
                        <div class="font-size-30">{{ statisticsData.withdraw_data.day.not_withdraw.amount }}</div>
                    </el-col>
                    <el-col :span="4" class="flex-col col-center">
                        <div class="lighter m-b-8">{{ statisticsData.withdraw_data.yesterday.withdraw.text }}</div>
                        <div class="font-size-30">{{ statisticsData.withdraw_data.yesterday.withdraw.amount }}</div>
                    </el-col>
                    <el-col :span="4" class="flex-col col-center">
                        <div class="lighter m-b-8">{{ statisticsData.withdraw_data.yesterday.not_withdraw.text }}</div>
                        <div class="font-size-30">{{ statisticsData.withdraw_data.yesterday.not_withdraw.amount }}</div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="ls-card m-t-16" v-if="Object.keys(statisticsData.red_envelope).length > 0">
            <div class="card-title">红包汇总</div>
            <div class="card-content m-t-24">
                <el-row :gutter="24">
                    <el-col :span="4" class="flex-col col-center">
                        <div class="lighter m-b-8">
                            {{ statisticsData.red_envelope.total.red_envelope_amount.text }}
                        </div>
                        <div class="font-size-30">
                            {{ statisticsData.red_envelope.total.red_envelope_amount.amount }}
                        </div>
                    </el-col>
                    <el-col :span="4" class="flex-col col-center">
                        <div class="lighter m-b-8">{{ statisticsData.red_envelope.total.red_envelope_count.text }}</div>
                        <div class="font-size-30">{{ statisticsData.red_envelope.total.red_envelope_count.count }}</div>
                    </el-col>
                    <el-col :span="4" class="flex-col col-center">
                        <div class="lighter m-b-8">{{ statisticsData.red_envelope.day.red_envelope_amount.text }}</div>
                        <div class="font-size-30">{{ statisticsData.red_envelope.day.red_envelope_amount.amount }}</div>
                    </el-col>
                    <el-col :span="4" class="flex-col col-center">
                        <div class="lighter m-b-8">{{ statisticsData.red_envelope.day.red_envelope_count.text }}</div>
                        <div class="font-size-30">{{ statisticsData.red_envelope.day.red_envelope_count.count }}</div>
                    </el-col>
                    <el-col :span="4" class="flex-col col-center">
                        <div class="lighter m-b-8">
                            {{ statisticsData.red_envelope.yesterday.red_envelope_amount.text }}
                        </div>
                        <div class="font-size-30">
                            {{ statisticsData.red_envelope.yesterday.red_envelope_amount.amount }}
                        </div>
                    </el-col>
                    <el-col :span="4" class="flex-col col-center">
                        <div class="lighter m-b-8">
                            {{ statisticsData.red_envelope.yesterday.red_envelope_count.text }}
                        </div>
                        <div class="font-size-30">
                            {{ statisticsData.red_envelope.yesterday.red_envelope_count.count }}
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="ls-card m-t-16" v-if="Object.keys(statisticsData.level).length > 0">
            <div class="card-title">会员汇总</div>
            <div class="card-content m-t-24">
                <el-row
                    :gutter="
                        (Object.keys(statisticsData.level.total).length +
                            Object.keys(statisticsData.level.day).length +
                            Object.keys(statisticsData.level.yesterday).length) *
                        4
                    "
                >
                    <template v-for="(item, index) in statisticsData.level.total">
                        <el-col :span="4" class="flex-col col-center">
                            <div class="lighter m-b-8">{{ item.name }}总数</div>
                            <div class="font-size-30">{{ item.count }}</div>
                        </el-col>
                    </template>
                    <template v-for="(item, index) in statisticsData.level.day">
                        <el-col :span="4" class="flex-col col-center">
                            <div class="lighter m-b-8">{{ item.name }}总数</div>
                            <div class="font-size-30">{{ item.count }}</div>
                        </el-col>
                    </template>
                    <template v-for="(item, index) in statisticsData.level.yesterday">
                        <el-col :span="4" class="flex-col col-center">
                            <div class="lighter m-b-8">{{ item.name }}总数</div>
                            <div class="font-size-30">{{ item.count }}</div>
                        </el-col>
                    </template>
                </el-row>
            </div>
        </div>
        <div class="ls-card m-t-16" v-if="Object.keys(statisticsData.identity).length > 0">
            <div class="card-title">身份汇总总数</div>
            <div class="card-content m-t-24">
                <el-row :gutter="Object.keys(statisticsData.identity.total).length * 4">
                    <template v-for="(item, index) in statisticsData.identity.total">
                        <el-col :span="4" class="flex-col col-center">
                            <div class="lighter m-b-8">{{ item.name }}</div>
                            <div class="font-size-30">{{ item.count }}</div>
                        </el-col>
                    </template>
                </el-row>
            </div>
        </div>
        <div class="ls-card m-t-16" v-if="Object.keys(statisticsData.identity).length > 0">
            <div class="card-title">今日身份汇总总数</div>
            <div class="card-content m-t-24">
                <el-row :gutter="Object.keys(statisticsData.identity.day).length * 4">
                    <template v-for="(item, index) in statisticsData.identity.day">
                        <el-col :span="4" class="flex-col col-center">
                            <div class="lighter m-b-8">{{ item.name }}</div>
                            <div class="font-size-30">{{ item.count }}</div>
                        </el-col>
                    </template>
                </el-row>
            </div>
        </div>
        <div class="ls-card m-t-16" v-if="Object.keys(statisticsData.identity).length > 0">
            <div class="card-title">昨日身份汇总总数</div>
            <div class="card-content m-t-24">
                <el-row :gutter="Object.keys(statisticsData.identity.yesterday).length * 4">
                    <template v-for="(item, index) in statisticsData.identity.yesterday">
                        <el-col :span="4" class="flex-col col-center">
                            <div class="lighter m-b-8">{{ item.name }}</div>
                            <div class="font-size-30">{{ item.count }}</div>
                        </el-col>
                    </template>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { BarChart, LineChart, PieChart } from 'echarts/charts'
import { GridComponent, LegendComponent, PolarComponent, TitleComponent } from 'echarts/components'
import * as echarts from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { Component, Vue } from 'vue-property-decorator'

import { apiStatistics, apiUserAnalysis } from '@/api/data/data'
import Template from '@/views/shop/pages/template.vue'

echarts.use([
    BarChart,
    GridComponent,
    CanvasRenderer,
    TitleComponent,
    LegendComponent,
    PolarComponent,
    LineChart,
    PieChart
])
@Component({
    components: { Template }
})
export default class User extends Vue {
    /** S Data **/
    statisticsData = {
        user_data: {},
        sales_data: {},
        sales_data_balance: {},
        sales_data_wechat: {},
        sales_data_alipay: {},
        withdraw_data: {},
        red_envelope: {},
        identity: [],
        level: []
    }
    maker_members = 0
    maker_mentor = 0
    month = ''
    onReset() {
        this.month = ''
        this.getDataCenterStatistics()
    }

    // 获取数据
    getDataCenterStatistics() {
        apiStatistics({ date: this.month }).then(res => {
            this.statisticsData.user_data = res.user_data
            this.statisticsData.sales_data = res.sales_data
            this.statisticsData.sales_data_balance = res.sales_data_balance
            this.statisticsData.sales_data_alipay = res.sales_data_alipay
            this.statisticsData.sales_data_wechat = res.sales_data_wechat
            this.statisticsData.withdraw_data = res.withdraw_data
            this.statisticsData.red_envelope = res.red_envelope
            this.statisticsData.identity = res.identity
            this.statisticsData.level = res.level
        })
    }
    /** E Methods **/

    /** S Life Cycle **/
    created() {
        this.getDataCenterStatistics()
    }
    /** E Life Cycle **/
}
</script>

<style lang="scss" scoped>
.user {
    .ls-card {
        .card-title {
            font-size: 14px;
            font-weight: 500;
        }
    }

    .ls-card-top {
        padding-bottom: 0;
    }

    .ls-chart--turnover,
    .ls-chart--visitors {
        height: 460px;
        min-width: 500px;

        .chart {
            height: 400px;
        }
    }
}
</style>
